<template>
  <div class="">
    <el-form :model="detailForm" ref="detailForm" :rules="rules" :label-position="labelPosition">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="header-card">
          <span class="header-card-title">牌照信息</span>
        </div>

        <el-row :gutter="24">
          <el-col :span="8">
            <el-row>
              <el-col>
                <el-form-item label="登记证:">
                  <el-image style="width: 280px; height: 150px" :src="registerUrl" :preview-src-list="[registerUrl]"/>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="行驶本:">
                  <el-image style="width: 280px; height: 150px" :src="driveBookUrl"
                            :preview-src-list="[driveBookUrl]"/>
                </el-form-item>
              </el-col>
            </el-row>

          </el-col>
          <el-col :span="16">
            <el-row :gutter="24">
              <el-col :span="12" v-if="isShow">
                <el-form-item label="车牌号:" prop="carNo">
                  <el-input v-if="isEdit" v-model="detailForm.carNo" placeholder="输入车牌号"></el-input>
                  <span v-else>{{ detailForm.carNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="isShow">
                <el-form-item label="上牌时间:" prop="licensePlateTime">
                  <el-date-picker type="date" v-model="detailForm.licensePlateTime" v-if="isEdit"
                                  placeholder="选择上牌时间"
                                  value-format='yyyy-MM-dd' style="width: 100%;">
                  </el-date-picker>
                  <span v-else>{{ detailForm.licensePlateTime }}</span>
                </el-form-item>

              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="车辆类型:" prop="carType">
                  <el-select v-if="isEdit" style="width: 100%" v-model="detailForm.carType"
                             placeholder="请选择车辆类型">
                    <el-option v-for="item in dict.type.car_type" :key="item.value" :label="item.label"
                               :value="item.value"/>
                  </el-select>
                  <span v-else>{{
                      selectDictLabel(dict.type.car_type, detailForm.carType)
                    }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="登记时间:" prop="issuanceDate">
                  <el-date-picker type="date" v-model="detailForm.issuanceDate" v-if="isEdit" placeholder="选择登记时间"
                                  value-format='yyyy-MM-dd' style="width: 100%;">
                  </el-date-picker>
                  <span v-else>{{ detailForm.issuanceDate }}</span>
                </el-form-item>

              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="12" v-if="isShow">
                <el-form-item label="车辆登记证:" prop="registerUrl">

                  <updataFile v-model="detailForm.registerUrl" @okUpdata="okUpdata"
                              @getFileLists="getFileListsRegisterUrl" ref="refRegisterUrl" :isEdit="isEdit"/>

                  <el-button v-if="isEdit" type="primary" @click="handleClick('dj')" plain>OCR识别</el-button>


                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="isShow">
                <el-form-item label="行驶本:" prop="driveBookUrl">

                  <updataFile v-model="detailForm.driveBookUrl" @okUpdata="okUpdata"
                              @getFileLists="getFileListsDriveBookUrl" :isEdit="isEdit" ref="refDriveBookUrl"/>
                  <el-button  v-if="isEdit" type="primary" @click="handleClick('xs')" plain>OCR识别</el-button>

                </el-form-item>
              </el-col>
            </el-row>

          </el-col>
        </el-row>

      </el-card>
    </el-form>
  </div>
</template>

<script>
import updataFile from "../../registration/updataFile.vue";
import {
  uploadDriverLicense,
  getVehicleRegistrationCertificate,
} from "@/api/cwgd/registrationApi.js";

export default {
  name: "licensePlate",
  dicts: ["car_type"],
  props: {
    value: {
      type: Object,
      default: {},
    },
    isEdit: {
      type: Boolean,
      default: true,
    },
  },
  components: {updataFile},
  computed: {
    detailForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
    labelPosition() {
      if (this.isEdit) {
        return "top";
      } else {
        return "right";
      }
    },
  },
  watch: {
    'value.driveBookUrl': {
      handler(val) {
        if (!val) {
          this.driveBookUrl = ''
        }
      },
      deep: true
    },
    'value.registerUrl': {
      handler(val) {
        if (!val) {
          this.registerUrl = ''
        }
      },
      deep: true
    }
  },
  data() {
    return {
      isShow: true,
      driveBookUrl: "",
      registerUrl: "",
      rules: {
        carNo: [
          {required: this.isEdit, message: "请输入车牌号", trigger: "blur"},
        ],
        licensePlateTime: [
          {required: this.isEdit, message: "请输入上牌时间", trigger: "blur"},
        ],
        registerUrl: [
          {
            required: this.isEdit,
            message: "请输入车辆登记证",
            trigger: "blur",
          },
        ],
        driveBookUrl: [
          {required: this.isEdit, message: "请上传行驶本", trigger: "blur"},
        ],
        issuanceDate: [
          {required: this.isEdit, message: "请输入登记时间", trigger: "blur"},
        ],
        carType: [
          {
            required: this.isEdit,
            message: "请选择车辆类型",
            trigger: "change",
          },
        ],
      },
      uploadType: "",
      urlList: []
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleClick(str) {
      this.uploadType = str;
      if (this.urlList && this.urlList.length > 0) {
        if (this.uploadType === "xs") {
          this.driveBookUrl = this.urlList[0].url;
          this.uploadDriverLicense(this.urlList[0].ossId);
        }
        if (this.uploadType === "dj") {
          this.registerUrl = this.urlList[0].url;
          this.handleRegistration(this.urlList[0].ossId);
        }
      } else {
        if (this.uploadType === "xs") {
          this.value.carNo = "";
          this.value.licensePlateTime = "";
          this.driveBookUrl = "";
          this.value.driveBookUrl = "";
          this.value.carType = "";
        }
        if (this.uploadType === "dj") {
          this.registerUrl = "";
        }
      }
    },

    okUpdata(arr) {
      this.urlList = this._.cloneDeep(arr)
    },

    async uploadDriverLicense(id) {
      try {
        const res = await uploadDriverLicense(id);
        this.value.carNo = res.data.licensePlateNum;
        this.value.licensePlateTime = res.data.registerTime;
        this.value.carType = res.data.carType;
      } catch (e) {
        this.$refs.refDriveBookUrl.handleDelete(0);
        this.value.carNo = "";
        this.value.licensePlateTime = "";
        this.driveBookUrl = "";
        this.detailForm.driveBookUrl = "";
        this.value.driveBookUrl = "";
        this.value.carType = "";
      }
    },

    async handleRegistration(id) {
      try {
        const res = await getVehicleRegistrationCertificate(id);
        this.detailForm.issuanceDate = res.data.registrationDate
      } catch (e) {
        console.error(e);
        this.$refs.refRegisterUrl.handleDelete(0);
        this.registerUrl = "";
      } finally {
      }
    },

    getFileListsRegisterUrl(arr) {
      if (arr) {
        let url = this._.cloneDeep(arr)[0].url;
        this.registerUrl = url;
      } else {
        this.registerUrl = "";
        this.value.issuanceDate = ""
      }
    },
    getFileListsDriveBookUrl(arr) {
      if (arr) {
        let url = this._.cloneDeep(arr)[0].url;
        this.driveBookUrl = url;
      } else {
        this.value.carNo = "";
        this.value.licensePlateTime = "";
        this.driveBookUrl = "";
      }
    },
    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.detailForm.validate((valid) => {
          if (valid) {
            resolve();
          } else {
            this.locateToErr();
            reject();
          }
        });
      });
    },

    locateToErr() {
      this.$nextTick(() => {
        let isError = document.getElementsByClassName("is-error");
        isError[0].scrollIntoView({
          // 滚动到指定节点
          // 值有start,center,end，nearest，当前显示在视图区域中间
          block: "center",
          // 值有auto、instant,smooth，缓动动画（当前是慢速的）
          behavior: "smooth",
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  font-size: 14px;
  margin-bottom: 16px;
}

.el-form-item {
  width: 70%;
}
</style>


